<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.lbox{
				margin: 30px;
				padding: 10px;
			}
			.lbox .row{
				padding: 10px 0;
			}
			.progress{
				margin-top: 10px;
			}
			.rbox{
				margin: 30px;
			}
			.rbox h4{
				color: #17A2B8;
				border-bottom: 1px solid #17A2B8;
				padding-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 左侧布局 -->
				<div class="col-12 col-sm-4 bg-info text-white">
					<div class="lbox">
						<img src="img/Example-ch3/Example-ch3/img/jianli.JPG" >
					</div>
					<div class="lbox"> 
						<p><span class="iconfont icon-yonghu"></span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</p>
						<p><span class="iconfont icon-icon"></span>工作年限：</p>
						<p><span class="iconfont icon-24gf-telephone3"></span>联系电话：</p>
						<p><span class="iconfont icon-youxiang"></span>电子邮箱：</p>
					</div>
					<div class="lbox">
						<h4>技能特长:</h4>
						<!-- 栅格的嵌套 -->
						<div class="row">
							<div class="col-sm-4">
								<span>HTML5</span>
							</div>
							<div class="col-sm-8">
								<div class="progress">
									<div class="progress-bar bg-success progress-bar-striped" style="width: 99%;"></div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<span>CSS3</span>
							</div>
							<div class="col-sm-8">
								<div class="progress">
									<div class="progress-bar bg-info progress-bar-striped" style="width: 85%;"></div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<span>JavaScript</span>
							</div>
							<div class="col-sm-8">
								<div class="progress">
									<div class="progress-bar bg-warning progress-bar-striped" style="width: 93%;"></div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<span>Bootstarp</span>
							</div>
							<div class="col-sm-8">
								<div class="progress">
									<div class="progress-bar bg-secondary progress-bar-striped" style="width: 85%;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右侧布局 -->
				<div class="col-12 col-sm-8 border">
					<div class="rbox">
						<h3>江小白的简历</h3>
						<p>一句话介绍机子，告诉HR为什么选择自己而不会别人</p>
					</div>
					<div class="rbox">
						<h4>求职意向</h4>
						<p>数据库管理系统运维与开发、运维工程师、Java程序员、软件开发工程师、鸿蒙移动开发工程师、web前端开发工程师</p>
					</div>
					<div class="rbox">
						<h4>教育背景</h4>
						<p>2020.10-2023.6&nbsp;&nbsp;武汉职业技术学院信创学院计算机应用技术专业</p>
					</div>
					<div class="rbox">
						<h4>工作经验</h4>
						<p>web前端实习生</p>
						<p>工作描述</p>
						<ul>
							<li>负责学习</li>
							<li>负责学习</li>
							<li>负责学习</li>
							<li>负责学习</li>
						</ul>
					</div>
					<div class="rbox">
						<h4>自我评价</h4>
						<ol>
							<li>好好学习天天向上</li>
							<li>好好学习天天向上</li>
							<li>好好学习天天向上</li>
							<li>好好学习天天向上</li>
							<li>好好学习天天向上</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
